<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {margin: 0;}
		#ul1 {width: 1080px; margin: 100px auto 0;}
		li { width: 247px; list-style: none; float: left; margin-right: 10px; }
		li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
		li div img { width: 225px; display: block;}

	</style>
	<script src="../js/ajax封装.js"></script>

</head>
<body>
	<ul id="list">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
<script type="text/javascript">
	
	var oUl=document.getElementById('list');
	var aLi=oUl.getElementsByTagName('li');
	var len=aLi.length;
	var page=1;
	var onOff=true;

	getList();
	async function getList(){
		var str=await Ajax('GET','http://39.105.192.164:9090/apitest/goodslist','pager='+page);
		var data=JSON.parse(str).data.list;

		data.forEach(function(item){
			var _index=getShort();
			var oDiv=document.createElement('div');
			oDiv.innerHTML=`
				<img src=${item.pic}
				<p>${item.name}</p>
			`
			aLi[_index].appendChild(oDiv);
		})
		onOff=true;
	}
	//鼠标滚动加载
	// window.onscroll=function(){
	// 	var _index=getShort();
	// 	console.log(_index)
	// 	var oLi=aLi[_index];
	// 	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

	// 	if(getTop(oLi)+oLi.offsetHeight<document.documentElement.clientHeight+scrollTop){
	// 		if(onOff){
	// 			onOff=false;
	// 			page++;
	// 			getList();
	// 		}

	// 	}
	// }


	//得到最短li的索引
	function getShort(){
		var index=0;
		var ih=aLi[index].offsetHeight;
		for(var i=1;i<len;i++){
			if(aLi[i].offsetHeight<ih){
				index=i;
				ih=aLi[i].offsetHeight;
			}
		}
		return index;
		console.log(index);
	}

	//得到li的offsetTop
	// function getTop(obj){
	// 	var iTop=0;
	// 	while(obj){
	// 		iTop+=obj.offsetTop;
	// 		obj=obj.offsetParent;
	// 	}
	// 	return iTop;
	// }
</script>
</body>
</html>